<template>
  <div class="main">
    <div class="title">
      <div class="btn" :class="{ active: flag === true }" @click="flag = true">
        登录
      </div>
      <div
        class="btn"
        :class="{ active: flag === false }"
        @click="switchRegister"
      >
        注册
      </div>
    </div>
    <div class="login" v-if="flag">
      <div class="input_login">
        <input
          type="text"
          v-model="userName"
          placeholder="邮箱/手机号码/小米ID"
        />
        <input type="password" v-model="passWord" placeholder="密码" />
      </div>
      <div class="agree">
        <input type="checkbox" v-model="isAgree" />已阅读并同意小米账号
      </div>
      <div>
        <button class="loginBtn" @click="loginpost">登录</button>
      </div>
      <div class="text"><span>忘记密码？</span><span>手机号登录</span></div>
    </div>

    <div class="register" v-else>
      <div class="input_login">
        <input type="text" v-model="userName" placeholder="请输入账号" />
        <input type="password" v-model="passWord" placeholder="密码" />
        <input type="password" v-model="rePassWord" placeholder="确认" />
      </div>
      <div class="agree">
        <input type="checkbox" v-model="isAgree" />已阅读并同意小米账号
      </div>
      <div>
        <button @click="registerPost" class="loginBtn">注册</button>
      </div>
      <div class="text"><span>收不到验证码？</span></div>
    </div>
    <div class="pay">
      <span>其他方式登录</span>
      <div class="pays">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { loginApi, registerApi, isHaveUserApi } from "../../api/userApi";
import { useRouter, useRoute } from "vue-router";
import { useAppStore } from "../../store/user";
import { useShoppingCartStore } from '../../store/shoppingCart'
const useShoppingStore = useShoppingCartStore()
const userStore = useAppStore();
const router = useRouter();
const route = useRoute();
const flag = ref(true);
const isAgree = ref(false);
const userName = ref("");
const passWord = ref("");
//判断是否显示注册
onMounted(() => {
  if (route.query.flag) {
    flag.value = false;
  }
});

const loginpost = async () => {
  if (!isAgree.value) {
    console.log("请勾选协议");
    return;
  }
  const res = await loginApi(userName.value, passWord.value);
  console.log(res);
  userStore.setUser_id(res.user.user_id);
  userStore.setUserName(res.user.userName);
  localStorage.setItem("user_id", res.user.user_id);
  localStorage.setItem("userName", res.user.userName);

  //获取该用户购物车数据存到pinia中
  useShoppingStore.getShoppingCartData()
  
  if (route.query.redirect) {
    router.push(route.query.redirect as string);
    return;
  }
  router.push("/");
};

const rePassWord = ref("");
const registerPost = async () => {
  if (rePassWord.value !== passWord.value) {
    console.log("两次输入的密码不一致");
    return;
  }
  if (!isAgree.value) {
    console.log("请勾选协议");
    return;
  }
  try {
    await isHaveUserApi(userName.value);
    console.log("该用户名未被注册");
  } catch (error) {
    console.log("该用户名已被注册");
    return;
  }
  await registerApi(userName.value, passWord.value);
  console.log("注册成功");
  flag.value = true;
};
//切换到注册清空表单数据
const switchRegister = () => {
  flag.value = false;
  userName.value = "";
  passWord.value = "";
  rePassWord.value = "";
};
</script>

<style scoped>
.main {
  width: 450px;
  /* height: 550px; */
  border: 1px solid red;
  padding: 50px;
}
.title {
  margin-top: 10px;
  display: flex;
}
.btn {
  height: 45px;
  font-size: 20px;
  font-weight: 900;
  color: coral;
  text-align: center;
  line-height: 50px;
  margin-bottom: 10px;
  margin-right: 5px;
}
.active {
  border-bottom: 5px solid coral;
}
.input_login {
  /* margin-top: 15px; */
}
.input_login > input {
  height: 50px;
  width: 100%;
  border: 1px solid #aaa;
  padding: 10px;
  margin-top: 20px;
  outline: none;
  border-radius: 5px;
}
.agree {
  margin: 15px 0;
  display: flex;
  align-items: center;
}
.agree input {
  margin-right: 5px;
}
.loginBtn {
  width: 100%;
  /* border: 1px solid red; */
  height: 60px;
  background-color: coral;
  border-radius: 10px;
}
.text {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  color: coral;
}
.pay {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pay > span {
  color: #aaa;
}
.pays {
  width: 80%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.pays > div {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
</style>
